import React from 'react';
import {Checkbox, Radio} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaHelpfulTip} from 'ecCom';
import {WeaLocaleProvider} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';
import {WeaMaterialLib} from 'weaPortalPublic';

// Flash元素
export default class Content_Flash extends React.Component {
    state = {
        eFlashShow: this.props.eFlashShow,
        eFlashForm: this.props.eFlashForm
    };

    render() {
        const {eFlashShow, eFlashForm} = this.state;

        let EShowSetting = <div></div>;
        let EFlashFrom = <div></div>;
        if (this.props.eShareLevel == '2') {
            EShowSetting = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@9na27d`} label={getLabel(33549, '显示设置')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <span>{getLabel(386530, '高度：')}</span>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@fkaq7p`} value={eFlashShow.height} style={{width: '50px'}} onChange={value => this.setState({eFlashShow: {...eFlashShow, height: value}})}/>
                </WeaFormItem>
            );

            const radioStyle = {
                display: 'block',
                height: '30px',
                lineHeight: '30px',
                marginBottom: '5px'
            };
            EFlashFrom = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@x10g6g`} label={getLabel(386579, 'Flash来源')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@cphjhs`} value={eFlashForm.type || '1'} onChange={e => this.setState({eFlashForm: {...eFlashForm, type: e.target.value}})}>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@exg703`} style={radioStyle} value="1">{getLabel(125333, '选择文件')}</Radio>
                        <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@c2z06e`} style={radioStyle} value="2">{getLabel(386575, 'URL路径')}</Radio>
                    </RadioGroup>
                    <div style={{position: 'absolute', top: 0, left: 0, width: '100%', marginLeft: '85px', paddingRight: '85px'}}>
                        <div style={radioStyle}>
                            <WeaMaterialLib ecId={`${this && this.props && this.props.ecId || ''}_WeaMaterialLib@kegbax`} value={eFlashForm.src} onChange={value => this.setState({eFlashForm: {...eFlashForm, src: value}})}/>
                        </div>
                        <div style={radioStyle}>
                            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@fj22cf`} value={eFlashForm.url} onChange={value => this.setState({eFlashForm: {...eFlashForm, url: value}})}/>
                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@hmzgp8`} style={{position: 'absolute',
                                paddingLeft: '10px'}} title={getLabel(516900,'因谷歌Chrome浏览器禁用Flash，基于谷歌Chrome内核的浏览器不支持 .swf、 .flv格式的视频播放') }/>
                        </div>
                    </div>
                </WeaFormItem>
            );
        }

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@eoaijx`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@n1itku`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@y3a7b3`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {EShowSetting}
                    {EFlashFrom}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentFlashShow_height: this.state.eFlashShow.height,
            eContentFlashShow_autoPlay: this.state.eFlashShow.autoPlay,
            eContentFlashForm_type: this.state.eFlashForm.type || '1',
            eContentFlashForm_src: this.state.eFlashForm.src,
            eContentFlashForm_url: this.state.eFlashForm.url
        };
    }
}